<!--组件结构的地方-->
<template>
  <div class="box">
    <h1 @click="add">我是App根组件---而当前{{ count }}</h1>
    <!--第三步:使用-->
    <todo-header></todo-header>
  </div>
</template>

<!--JS区域-->
<script>
//引入子组件
import TodoHeader from './components/TodoHeader';
//对外默认暴露暴露组件配置项
export default {
  //决定了组件在开发者工具中显示名字
  name: "App",
  //组件的响应式数据
  data() {
    return {
      count: 1,
    };
  },
  //组件实例的方法
  methods: {
    add() {
      this.count++;
    },
  },
  //第二步:注册
  components:{
    TodoHeader
  }
};
</script>


<style>
*{
  margin: 0;
  padding: 0;
}
html,body{
  width: 100%;
  height: 100%;
}
.box{
  width: 100%;
  height: 100%;
  background: cyan;
}
</style>